<!--
 * @name score
 * @description 组件描述
 * @author idouya
 * @email elegentfrog@163.com
 * @date 2025-07-03
 -->

<template>
  <div class="p-score common-bg common-layout">
    <page-title
      :discipline="gameInfo.discipline"
      :event="gameInfo.event"
      :match="gameInfo.match"
      :type="gameInfo.type"
    ></page-title>
    <div class="content">
      <div class="top">
        <div class="top-right">
          <div class="athelete">
            <div class="order common">{{ scoreInfo.Order }}</div>
            <div class="name common">
              {{ scoreInfo.AthleteName }}
            </div>
          </div>
          <div class="horse">
            <div class="order horseOrder common">{{ scoreInfo.HorseOrder }}</div>
            <div
              :class="[
                'name',
                'common',
                scoreInfo?.HorseName?.length > 15 ? 'horseNameAdapt1' : '',
              ]"
            >
              {{ scoreInfo.HorseName }}
            </div>
          </div>
          <div class="club">
            <!-- <div class="order" style="opacity: 0">1</div> -->
            <div class="name common">{{ scoreInfo.CountryName }}</div>
          </div>
        </div>
      </div>
      <div class="bottom">
        <div class="content-top content-time-out">{{ runTimeResult }}</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import useStore from '@/store'
import Config from '@/assets/js/config'
import { useMultiProcRequest } from '@/assets/js/useMultiProcRequest'
import { onBeforeMount, ref } from 'vue'

const { results, fetchForProcs } = useMultiProcRequest()

const gameInfo = ref({
  discipline: '马术',
  match: '马术场地障碍赛',
  event: 'DRESINDV',
  type: '90秒热身训练',
})

const atheleteInfo = ref({
  order: 1,
  name: '杨舒涵',
  delegation: '中国',
  horseOrder: 201,
  club: '好骑士嘉豪马术',
  horseName: 'Joanna',
  time: '00:00',
})

let timer1 = null
let timer2 = null
const TIMEOUT_MS = 90000
const runTimeResult = ref(90)
const runTime = ref(0)
const time0 = ref(0)
const time1 = ref(0)

const isRunning = ref(false)

let pastRunTimeMs = 0 // 之前已经运行了多少毫秒
let startTimeMs = 0 // 本轮开始时间戳（毫秒）

const timeout1 = ref(45) // 准备时间
const timeout2 = ref(30) // 运行时间

const { proxy } = getCurrentInstance()
const router = useRouter()
const route = useRoute()
const params = ref({})
const procName = ref([])
const commonStore = useStore.useCommonStore()
const scoreInfo = ref({})

onUnmounted(() => {
  clearInterval(timer1)
})
onBeforeMount(() => {
  startTimer()
  const lastMsg = commonStore.receivedActionMessages?.slice(-1)[0]
  // if (lastMsg && lastMsg.tplCode == 'scb-jump-90') {
  //   handleMessage(lastMsg)
  // }
})
onMounted(async () => {
  params.value = route.query
  procName.value = Config.procNameList[route.name]
  await getData()
})

const getData = async () => {
  if (procName.value.length > 0) {
    await fetchForProcs(procName.value, {
      procName: procName.value[0],
      keyValues: params.value,
    })
  }
}

// 准备时间倒计时
const startTimer = () => {
  timer1 = setInterval(() => {
    if (isRunning.value) {
      if (runTimeResult.value > 0) {
        runTimeResult.value--
      } else {
        // 显示 0 一秒后再重置为 90
        runTimeResult.value = 90
        isRunning.value = false
      }
    }
  }, 1000)
}

const handleMessage = (msg) => {
  const data = msg?.data
  if (!data) return
  if (data.status == 0) {
    runTimeResult.value = 90 // 假设单位是秒
    isRunning.value = false
  } else if (data.status == 1) {
    isRunning.value = !isRunning.value
  }
}

watchEffect(() => {
  if (results.value?.recordset?.length) {
    scoreInfo.value = results.value.recordset[0]
    gameInfo.value.event = results.value.recordset[0]?.EventCode
    // gameInfo.value.match = results.value.recordset[0]?.MatchName
  }
})

watch(
  () => commonStore.receivedActionMessages,
  (newVal, oldVal) => {
    if (newVal.length > 0) {
      const latestMsg = newVal[newVal.length - 1]
      // const data = latestMsg?.data
      handleMessage(latestMsg)
    }
  },
  { deep: true }
)

watch(
  () => route.query,
  (val) => {
    params.value = val
    getData()
  }
)
</script>

<style scoped lang="scss">
// @import '@/assets/scss/dressage/score3';
@import '@/assets/scss/scb/score';

.top {
  height: 50% !important;

  .top-right {
    width: 100% !important;
    display: flex;
    align-items: center;
  }
}
.bottom {
  height: 50% !important;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2rem;
}

.athelete,
.horse,
.club {
  font-size: 4.8rem !important;
  gap: 1rem;
  width: 60%;
  height: 33% !important;
  .name {
    width: 80% !important;
    margin: 0 !important;
  }
}

.club {
  background-image: url('@/assets/img/scb/bg-line2.png') !important;
  background-image: none;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  border-radius: 0.75rem;
  width: 60%;
  height: 35%;

  display: flex;
  align-items: center;
  justify-content: center;

  // .order {
  //   width: 20%;
  // }

  // .name {
  //   background-image: url('@/assets/img/scb/bg-line2.png');
  //   background-repeat: no-repeat;
  //   background-size: 100% 100%;
  //   text-align: center;
  // }
}

.content-top {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60%;
  background-image: url('@/assets/img/scb/bg-line2.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  border-radius: 0.75rem;
}

.content {
  .content-time-out {
    font-size: 20rem !important;
  }
}

.horseNameAdapt1 {
  font-size: 2.6rem;
}
</style>
